<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JukeBox</title>
</head>
<body>
Welcome to Party JukeBox!

<form id= "songSearchForm" method="get" action="http://www.google.com/search">
	<div style="border:1px solid black;padding:4px;width:20em;"> 
		<table> 
			<tr>
				<td> 
					<label for="SongSearch">Find a Song</label>
					<input type="search" id="SongSearch" size="32" maxlength="256" value="" />
				</td>
				<td>
					<input type="submit" name= "submitButton" value="Search"/>
				</td>
			</tr>
			<tr>
				<td align="center" style="font-size:75%">
					<input type="radio" name="searchWith" value="0" checked />Google
					<input type="radio" name="searchWith" value="1" />YouTube
					<br /> 
				</td>
			</tr>
		</table>
		<script type="text/javascript">
			var form = document.getElementById('songSearchForm');
			form.onsubmit = function (){
    		var radioChosen = Number(form.elements.searchWith.value);
    		if(radioChosen =="1")
    		{
    			form.action = "http://www.youtube.com/results";
    			form.elements.submitButton.onclick = 'http://www.youtube.com/results';
    		}
    		else
    			form.elements.submitButton.onclick= 'http://www.google.com/results';
		};
		</script>
	</div>
</form>


<form action="http://www.youtube.com/results" method="get" target="_blank">
<input name="search_query" type="text" maxlength="128" />
<input type="submit" value="Search"/>
</form>
<iframe src="http://www.youtube.com" name="youtube" width="500" height="500"></iframe>
<p><a href="http://www.youtube.com" target="youtube"></a></p>

</body>
</html>